<template>
   <div style="height: 100%;padding: 20px;box-sizing:border-box;">
      <div class="bor">
         <span>筛选条件：</span>
         <div class="mt-4" style="width: 30%;display: inline-block;">
            <el-input v-model="input1" placeholder="请输入搜索内容" class="input-with-select">
               <template #prepend>
                  <el-select v-model="select" placeholder="手机号" style="width: 100px">
                     <el-option label="姓名" value="1" />
                     <el-option label="昵称" value="2" />
                     <el-option label="手机号" value="3" />
                     <el-option label="会员卡号" value="4" />
                  </el-select>
               </template>
            </el-input>
         </div>
         <el-button type="primary" style="margin-left: 5px;">查询</el-button>

         <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column label="用户信息">
               <template #default="scope">
                  <!-- <div>{{scope.row.aaa}}</div> -->
                  <img :src="scope.row.photo" style="width:80px; height:80px;border-radius: 20px;">
                  <div style="display: inline-block;vertical-align:25px;margin-left: 3px;">
                     <span style="display: block;margin-bottom: 1px;">{{scope.row.name}}</span>
                     <span style="display: block;background-color: #999;border-radius: 30px;text-align: center;">
                        {{scope.row.nickname}}
                     </span>
                  </div>
               </template>
            </el-table-column>
            <el-table-column property="phone" label="手机号码" />
            <el-table-column property="currentBalance" label="可用余额" />
            <el-table-column property="currentIntegral" label="可用积分" />


            <el-table-column fixed="right" label="操作">
               <template #default="{ row }">
                  <el-button link type="primary" size="small" @click="details()">详情</el-button>
                  <el-button link type="primary" size="small" @click="edit(row)">修改</el-button>
                  <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
               </template>
            </el-table-column>

         </el-table>
      </div>

      <el-pagination v-model:current-page="currentPage4" v-model:page-size="render.count" :page-sizes="[1,2,3,4,5]"
         :small="small" :disabled="disabled" background="true" layout="total, sizes, prev, pager, next, jumper"
         :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
         style="margin-top: 5%;margin-bottom: 1rem;text-align: center;" />


      <!-- 删除框 -->
      <el-dialog title="确定要删除吗？" v-model="delDialog" width="30%">
         <template #footer>
            <span slot="footer" class="dialog-footer">
               <el-button @click="delDialog = false">取 消</el-button>
               <el-button type="primary" @click="suredel">确定</el-button>
            </span>
         </template>
      </el-dialog>

      <!-- 修改弹出框 -->
      <el-dialog title="修改用户信息" v-model="editDialog" width="30%">
         <el-form :model="editData">
            <el-form-item label="手机号码:" :label-width="formLabelWidth">
               <el-input v-model="editData.user" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可用余额:" :label-width="formLabelWidth">
               <el-input v-model="editData.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可用积分:" :label-width="formLabelWidth">
               <el-input v-model="editData.surepassword" type="password" autocomplete="off"></el-input>
            </el-form-item>
         </el-form>
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="editDialog = false">取 消</el-button>
               <el-button type="primary" @click="editqueding">修改</el-button>
            </span>

         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import img from '../../imges/100.png'
import { editApi, delApi, renderApi } from '../../api/WuJiApi/axios';


const input1 = ref('')
const select = ref('')
let currentPage4 = ref(1)
let total = ref(20)
let small = ref(false)
let disabled = ref(false)
let editDialog = ref(false)
let formLabelWidth = '100px'
let delDialog = ref(false)
let render = reactive({
   page: 1,
   count: 5
})
let editData: { user: any, password: string, surepassword: string } = reactive({
   user: '',
   password: '',
   surepassword: ''
})

interface User {
   id:number
   name: any
   photo: any
   nickname: any
   vipcard: any
   currentBalance: any
   pdone:any
   currentIntegral:any
}
let tableData: User[] = reactive([
   {
      id:123,   
      name: '张三',
      photo: img,
      nickname: '1000.00',
      vipcard: '',
      currentBalance: '',
      pdone:'',
      currentIntegral:''
   },
])

const details = () => {
   console.log('详情');
}
const edit = (row: User[]) => {
   console.log('修改', row);
   editDialog.value = true
}
const del = (row: User[]) => {
   console.log('删除', row);
   delDialog.value = true
}

//渲染
const Remon = async () => {
   const { data }: { [propsName: string]: any } = await renderApi(render)
   console.log(123, data);
   tableData.length=0
   tableData.push(...data.data)
   total.value=data.count
}
Remon()
const handleSizeChange = (val: number) => {
   console.log(`${val} items per page`)
   
}
//分页
const handleCurrentChange = (val: number) => {
   console.log(`current page: ${val}`)
   render.page = val
   console.log(111,render.page);
}
Remon()

//删除确定
let suredel = () => {
   // delApi()
}
//修改确定
let editqueding = async () => {
   // const data:{[propsName:string]:any}= await editApi(editData)
}
</script>

<style scoped lang="less">
.box {
   height: 7%;
   line-height: 50px;
   background-color: white;
   border-bottom: 1px solid #c8c7c7;
   padding-left: 20px;
}

.box :nth-child(1) {
   color: #b6aeae;
}

.box :nth-child(2) {
   color: #333;
}
</style>